<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01tab栏切换升级版</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:1px solid #ccc;
            margin: 50px auto;
            overflow: hidden;
        }
        ul{
            list-style-type: none;
        }
        .top span{
            display: inline-block;
            background-color: pink;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor:pointer;
        }
        .top span.current{
            background-color: purple;
        }
        .bottom li{
            width: 100%;
            height: 270px;
            background-color: purple;
            display: none;
        }
        .bottom li.show{
            display: block;
        }
    </style>
    <script>
        window.onload = function(){
            //获取所有的span和li(这里需要指出的是span和li必须是一一对应的，即个数必须得相等)
            var spans = document.getElementsByTagName("span");
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<spans.length;i++){
                spans[i].index = i;  //给span设置index属性，先存下下标,关键
                spans[i].onmouseover = function(){
                    //清除所有的li和span的属性（排他思想）
                    for(var j=0;j<spans.length;j++){
                        spans[j].className="";
                        lis[j].className="";
                    }
                    //选中点击的span和它对应的li
                    this.className="current";
                    lis[this.index].className="show";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="top">
        <span class="current">新闻</span>
        <span>体育</span>
        <span>娱乐</span>
        <span>八卦</span>
    </div>
    <div class="bottom">
        <ul>
            <li class="show">新闻模块</li>
            <li>体育模块</li>
            <li>娱乐模块</li>
            <li>八卦模块</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="top">
        <span class="current">新闻</span>
        <span>体育</span>
        <span>娱乐</span>
        <span>八卦</span>
    </div>
    <div class="bottom">
        <ul>
            <li class="show">新闻模块</li>
            <li>体育模块</li>
            <li>娱乐模块</li>
            <li>八卦模块</li>
        </ul>
    </div>
</div>
</body>
</html>